<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        /* font-family: 'Poppins', sans-serif;111 */
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #08001b;
        min-height: 100vh;
      }
      .container {
        width: 1100px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
      }
      .container .card {
        position: relative;
        width: 300px;
        height: 400px;
        background: #0c002b;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 30px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
        overflow: hidden;
      }
      .container.card:hover {
        opacity: 0.2;
      }
      .container .card::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        bottom: 2px;
        width: 50%;
        background: rgba(0, 0, 0, 0.1);
        pointer-events: none;
      }
      .container .card .content {
        padding: 30px;
        text-align: center;
      }
      .container .card .content h2 {
        position: absolute;
        right: 30px;
        font-style: 4em;
        font-weight: 800;
        color: skyblue;
        z-index: 1;
        opacity: 0.1;
        transition: 0.5s;
      }
      .container .card:hover .content h2 {
        opacity: 1;
        transform: translateY(-70px);
      }
      .container .card .content {
        position: relative;
        font-size: 1.5em;
        color: #fff;
        z-index: 2;
        opacity: 0.5;
        font-weight: 300;
        letter-spacing: 1px;
        transition: 0.5x;
      }
      .container .card:hover .content h3,
      .container .card:hover .content p {
        opacity: 1;
      }
      .container .card .content a {
        display: inline-block;
        margin-top: 15px;
        padding: 8px 15px;
        background: #fff;
        color: #0c002b;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 600;
      }
      .container .card span {
        transition: 0.5;
        opacity: 0;
      }
      .container .card:hover span {
        opacity: 1;
      }
      .container .card span:nth-child(1) {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(to right, transparent, skyblue);
        animation: Ada 2s linear infinite;
      }
      @keyframes Ada {
        0% {
          transform: translateX(-100%);
        }
        100% {
          transform: translateX(100%);
        }
      }
      .container .card span:nth-child(2) {
        position: absolute;
        top: 0;
        right: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient(to bottom, transparent, skyblue);
        animation: Ada2 2s 1s linear infinite;
      }
      @keyframes Ada2 {
        0% {
          transform: translateY(-100%);
        }
        100% {
          transform: translateY(100%);
        }
      }
      .container .card span:nth-child(3) {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(to left, transparent, skyblue);
        animation: Ada3 2s linear infinite;
      }
      @keyframes Ada3 {
        0% {
          transform: translateX(100%);
        }
        100% {
          transform: translateX(-100%);
        }
      }
      .container .card span:nth-child(4) {
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient(to top, transparent, skyblue);
        animation: Ada4 2s 1s linear infinite;
      }
      @keyframes Ada4 {
        0% {
          transform: translateY(100%);
        }
        100% {
          transform: translateY(-100%);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="card">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <div class="content">
          <!-- <h2>01</h2> -->
          <h3>贪玩蓝月</h3>
          <p>一刀999</p>
          <a href="#"> 游戏 下载 </a>
        </div>
      </div>
      <div class="card">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <div class="content">
          <!-- <h2>02</h2> -->
          <h3>贪玩蓝月</h3>
          <p>二刀9999</p>
          <a href="#"> 游戏 下载 </a>
        </div>
      </div>
      <div class="card">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <div class="content">
          <!-- <h2>03</h2> -->
          <h3>贪玩蓝月</h3>
          <p>刀刀99999</p>
          <a href="#"> 游戏 下载 </a>
        </div>
      </div>
    </div>
  </body>
</html>
